<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
    body,
    ul,
    li,
    ol,
    img {
        margin: 0;
        padding: 0;
    }

    html {
        font-size: 50px;
    }

    @copies: 15;

    @media screen and (min-width: 320px) {
        html {
            font-size: (320px / @copies);
        }
    }

    @media screen and (min-width: 360px) {
        html {
            font-size: (360px / @copies);
        }
    }

    @media screen and (min-width: 375px) {
        html {
            font-size: (375px / @copies);
        }
    }

    @media screen and (min-width: 384px) {
        html {
            font-size: (384px / @copies);
        }
    }

    @media screen and (min-width: 411px) {
        html {
            font-size: (411px / @copies);
        }
    }

    @media screen and (min-width: 414px) {
        html {
            font-size: (414px / @copies);
        }
    }

    @media screen and (min-width: 424px) {
        html {
            font-size: (424px / @copies);
        }
    }

    @media screen and (min-width: 480px) {
        html {
            font-size: (480px / @copies);
        }
    }

    @media screen and (min-width: 540px) {
        html {
            font-size: (540px / @copies);
        }
    }

    @media screen and (min-width: 720px) {
        html {
            font-size: (720px / @copies);
        }
    }

    @media screen and (min-width: 750px) {
        html {
            font-size: (750px / @copies);
        }
    }

    #banner-area {
        position: relative;
        width: 100%;
        height: 7rem;
        overflow: hidden;
    }

    #banner-area #banners-img {
        width: 10000%;
        height: 100%;
    }

    #banner-area #banners-img .img-area {
        float: left;
        width: 100vw;
        height: 100%;
        cursor: pointer;
    }

    #banner-area #banners-img .img-area img {
        width: 100vw;
        height: 100%;
        object-fit: cover;
    }

    #banner-area #banner-nav {
        position: absolute;
        bottom: 0.3rem;
        right: 0.3rem;
        width: 1.5rem;
        height: 0.8rem;
        font-size: 0.3rem;
        line-height: 0.8rem;
        text-align: center;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 0.4rem;
    }

    .album-name {
        font-size: 0.3rem;
        font-weight: 700;
        padding: 0.3rem;
        border-bottom: 0.1rem solid #f6f6f6;
    }

    .user-info {
        padding: 0.3rem;
        border-bottom: 0.1rem solid #f6f6f6;
        display: flex;
        align-items: center;
    }

    .user-info .user-avatar {
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
    }

    .user-info .user-name {
        font-size: 0.3rem;
        padding-left: 0.2rem;
    }

    .album-desc {
        text-align: center;
        padding-top: 0.3rem;
    }

    .desc-title {
        font-size: 0.3rem;
        margin-bottom: 0.2rem;
    }

    .desc-content {
        font-size: 0.25rem;
        margin-bottom: 0.2rem;
    }

    .desc-img img {
        display: block;
        width: 100%;
    }
</style>

<input id="info" type="hidden" value="{{ $info }}">
<div class="container">
    <div id="banner-area">
        <div id="banners-img"></div>
        <div id="banner-nav">1/1</div>
    </div>
    <div class="album-name"></div>
    <div class="user-info">
        <img class="user-avatar" src="" alt="">
        <div class="user-name"></div>
    </div>
    <div class="album-desc">
        <div class="desc-title">商品详情</div>
        <div class="desc-content"></div>
        <div class="desc-img"></div>
    </div>
</div>

<script>
    const ossPrefix = '{{ config('oss.url') }}';

    window.onload = function() {
        const info = JSON.parse(document.querySelector('#info').defaultValue)
        document.querySelector('.album-name').innerText = info?.title;
        document.querySelector('.desc-content').innerText = info?.describe;
        document.querySelector('.desc-img').innerHTML = info?.desc_img_ids.map(item =>
            `<img src="${getImgUrl(item)}" alt="详情图" />`).join('');
        document.querySelector('#banners-img').innerHTML = info?.file_ids.map(item =>
            `<div class="img-area">
                <img src="${getImgUrl(item)}" alt="轮播图" />
            </div>`).join('');
        document.querySelector('.user-info').innerHTML = `
            <img class="user-avatar" src="${info?.user_avatar ? getImgUrl(info?.user_avatar) : '/imgs/album/company.png'}" alt="用户头像" />
            <div class="user-name">${info?.user_shop_name || '匿名用户'}</div>
        `

        var bannerArea = document.querySelector("#banner-area");
        var width = bannerArea.offsetWidth;
        var bannerImg = bannerArea.querySelector("#banners-img");
        var imgCount = bannerImg.childElementCount;
        var bannerNav = document.querySelector("#banner-nav");

        setNav(0)
        var addTransition = () => {
            bannerImg.style.transition = "all 0.3s";
        };

        var removeTransition = () => {
            bannerImg.style.transition = "none";
        };

        var setTransform = (transitionX) => {
            bannerImg.style.transform = `translateX(${transitionX}px)`;
        };
        let index = 0;

        function autoPlay() {
            index++;
            addTransition();
            setTransform(-index * width);
            if (index >= imgCount) {
                index = 0;
                bannerImg.style.transform = `translateX(0px)`;
            }
            setNav(index);
        }
        var timer = setInterval(() => {
            autoPlay();
        }, 5000);

        function setNav(index) {
            bannerNav.innerHTML = `${index + 1}/${imgCount}`;
        }

        var startX = 0;
        var moveX = 0;
        var distanceX = 0;
        var isMove = false;

        bannerImg.addEventListener("touchstart", (e) => {
            clearInterval(timer);
            startX = e.touches[0].clientX;
        });

        bannerImg.addEventListener("touchmove", (e) => {
            moveX = e.touches[0].clientX;
            distanceX = moveX - startX;
            removeTransition();
            setTransform(-index * width + distanceX);
            isMove = true;
        });

        bannerImg.addEventListener("touchend", (e) => {
            if (isMove && Math.abs(distanceX) > width / 4) {
                if (distanceX > 0) {
                    index--;
                } else {
                    index++;
                }
            }
            addTransition();
            if (index >= imgCount) {
                index = 0;
                bannerImg.style.transform = `translateX(0px)`;
            } else if (index < 0) {
                index = imgCount - 1;
            }

            setTransform(-index * width);
            setNav(index);

            startX = 0;
            moveX = 0;
            distanceX = 0;
            isMove = false;
            clearInterval(timer);
            timer = setInterval(function() {
                autoPlay();
            }, 5000);
        });
    }

    function getImgUrl(path) {
        if (path && path.length === 20) {
            return `${ossPrefix}${path.slice(0, 4)}/${path.slice(4, 6)}/${path.slice(6, 8)}/${path.slice(8, 10)}/${path.slice(10)}`
        } else {
            return ossPrefix + path
        }
    }
</script>
